:root {
    --green:    #1D7348;
    --green-lt: #21A366;
    --green-glow: rgba(33,163,102,0.35);
    --gold:     #C9A84C;
    --gold-lt:  #F0C96B;
    --blue:     #0B3D6E;
    --blue-lt:  #1565C0;
    --white:    #F4F9F6;
    --dark:     #050F0A;
    --dark2:    #0B1A12;
    --glass:    rgba(255,255,255,0.04);
    --glass-border: rgba(33,163,102,0.18);
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  

  /* ── HERO WRAPPER ── */
  .hero-AnnonceExcel {
    position: relative;
    max-width: 800px;
    min-height: 600px;
    margin: 10px;
    border-radius: 15px;
    isolation: isolate;
    box-shadow:
      0 0 0 1px rgba(33,163,102,.2),
      0 40px 120px rgba(0,0,0,.8),
      0 0 80px rgba(33,163,102,.08);
      overflow: hidden;
  }

  /* ── CANVAS BACKGROUND ── */
  #bgCanvas {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
  }

  /* ── OVERLAY LAYERS ── */
  .overlay-gradient {
    position: absolute; inset: 0; z-index: 1;
    background:
      radial-gradient(ellipse 70% 80% at 20% 50%, rgba(11,61,110,.55) 0%, transparent 65%),
      radial-gradient(ellipse 60% 70% at 80% 40%, rgba(13,80,43,.45) 0%, transparent 60%),
      linear-gradient(135deg, rgba(5,15,10,.92) 0%, rgba(11,26,18,.88) 50%, rgba(5,15,10,.94) 100%);
  }

  .overlay-grid {
    position: absolute; inset: 0; z-index: 2;
    background-image:
      linear-gradient(rgba(33,163,102,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(33,163,102,.07) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: gridShift 20s linear infinite;
  }
  @keyframes gridShift {
    from { background-position: 0 0; }
    to   { background-position: 48px 48px; }
  }

  /* ── DECORATIVE ELEMENTS ── */
  .deco-ring {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(33,163,102,.12);
    z-index: 2; pointer-events: none;
  }
  .deco-ring:nth-child(1) { width:700px;height:700px; top:-200px; right:-180px; animation: ringPulse 8s ease-in-out infinite; }
  .deco-ring:nth-child(2) { width:500px;height:500px; top:-100px; right:-80px; animation: ringPulse 8s ease-in-out 2s infinite; }
  .deco-ring:nth-child(3) { width:320px;height:320px; bottom:-120px; left:-80px; border-color: rgba(201,168,76,.10); animation: ringPulse 10s ease-in-out 1s infinite; }
  @keyframes ringPulse {
    0%,100% { opacity:.4; transform:scale(1); }
    50%      { opacity:.9; transform:scale(1.04); }
  }

  /* floating excel cells */
  .cell-float {
    position: absolute; z-index: 2; pointer-events: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--green-lt);
    opacity: 0; animation: cellFloat 6s ease-in-out infinite;
    border: 1px solid rgba(33,163,102,.25);
    padding: 4px 8px; border-radius: 4px;
    background: rgba(33,163,102,.06);
    white-space: nowrap;
  }
  .cell-float:nth-child(1) { top:12%; right:22%; animation-delay:0s; }
  .cell-float:nth-child(2) { top:35%; right:10%; animation-delay:1.5s; }
  .cell-float:nth-child(3) { top:60%; right:18%; animation-delay:3s; }
  .cell-float:nth-child(4) { bottom:18%; right:28%; animation-delay:2s; }
  .cell-float:nth-child(5) { top:20%; right:38%; animation-delay:4s; color: var(--gold-lt); border-color: rgba(201,168,76,.3); background: rgba(201,168,76,.05);}
  @keyframes cellFloat {
    0%   { opacity:0; transform: translateY(12px); }
    20%  { opacity:.9; }
    80%  { opacity:.9; }
    100% { opacity:0; transform: translateY(-12px); }
  }

  /* ── CONTENT LAYOUT ── */
  .content {
    position: relative; z-index: 10;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 0;
   
    
  }

  /* ── LEFT PANEL ── */
  .left {
    padding: 15px 10px 15px 10px;
  }

  /* eyebrow */
  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(201,168,76,.1);
    border: 1px solid rgba(201,168,76,.3);
    border-radius: 100px;
    padding: 6px 10px 6px 10px;
    margin-bottom: 10px;
    opacity: 0;
    animation: fadeUp .6s ease forwards .1s;
  }
  .eyebrow-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold-lt);
    box-shadow: 0 0 8px var(--gold-lt);
    animation: blink 1.4s ease-in-out infinite;
  }
  @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.3;} }
  .eyebrow span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--gold-lt);
  }

  /* title */
  .title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(15px, 2vw, 52px);
    line-height: 1;
    letter-spacing: .02em;
    color: var(--white);
    opacity: 0; animation: fadeUp .7s ease forwards .25s;
    margin-bottom: 3px;
  }
  .title .accent {
    display: block;
    background: linear-gradient(90deg, var(--green-lt), var(--gold-lt));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 24px rgba(33,163,102,.4));
  }
  .title .rocket { -webkit-text-fill-color: initial; }

  /* subtitle */
  .subtitle {
    margin-top: 10px;
    font-size: clamp(10px, 1.3vw, 15px);
    color: rgba(244,249,246,.65);
    line-height: 1.7;
    max-width: 540px;
    opacity: 0; animation: fadeUp .7s ease forwards .4s;
  }
  .subtitle .kw {
    color: var(--green-lt);
    font-weight: 700;
  }

  /* badges */
  .badges {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 18px;
    opacity: 0; animation: fadeUp .7s ease forwards .55s;
  }
  .badge {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(33,163,102,.1);
    border: 1px solid rgba(33,163,102,.22);
    font-size: 12.5px; font-weight: 600;
    color: rgba(244,249,246,.9);
    transition: all .25s;
  }
  .badge:hover {
    background: rgba(33,163,102,.2);
    border-color: rgba(33,163,102,.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(33,163,102,.15);
  }
  .badge-icon { font-size: 14px; }

  /* CTA group */
  .cta-group {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin-top: 36px;
    opacity: 0; animation: fadeUp .7s ease forwards .7s;
  }
  .btn-cta {
    position: absolute;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 10px;
    border-radius: 10px;
    font-family: 'Syne', sans-serif;
    font-size: 13px; font-weight: 800;
    letter-spacing: .04em;
    color: #050F0A;
    background: linear-gradient(135deg, var(--gold-lt) 0%, var(--gold) 60%, #a07a2e 100%);
    border: none; cursor: pointer;
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgba(240,201,107,.3),
      0 8px 32px rgba(201,168,76,.4),
      inset 0 1px 0 rgba(255,255,255,.3);
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
    text-decoration: none;
  }
  .btn-cta::before {
    content:''; position:absolute;
    top:-50%; left:-60%; width:40%; height:100%;
    background: rgba(255,255,255,.35);
    transform: skewX(-20deg);
    animation: shimmer 3s ease-in-out infinite;
  }
  @keyframes shimmer {
    0%   { left: -60%; }
    40%  { left: 130%; }
    100% { left: 130%; }
  }
  .btn-cta:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow:
      0 0 0 1px rgba(240,201,107,.5),
      0 16px 48px rgba(201,168,76,.55),
      inset 0 1px 0 rgba(255,255,255,.4);
  }
  .btn-cta:active { transform: translateY(-1px) scale(1.01); }

  .urgency {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: rgba(244,249,246,.5);
    font-style: italic;
  }
  .urgency strong { color: #ff6b6b; font-style: normal; }

  /* info pills */
  .info-pills {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 15px;
    opacity: 0; animation: fadeUp .7s ease forwards .85s;
  }
  .pill {
    display: flex; align-items: center; gap: 3px;
    font-size: 12.5px; font-weight: 600;
    color: rgba(244,249,246,.6);
  }
  .pill-icon {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
  }

  /* ── RIGHT PANEL ── */
  .right {
    padding: 20px 20px 20px 10px;
    display: flex; flex-direction: column; gap: 10px;
    opacity: 0; animation: fadeRight .8s ease forwards .4s;
  }

  /* dashboard card */
  .dash-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 24px rgba(0,0,0,.3);
    transition: transform .3s, box-shadow .3s;
  }
  .dash-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(33,163,102,.12);
  }
  .dash-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: .15em; text-transform: uppercase;
    color: rgba(244,249,246,.35); margin-bottom: 10px;
  }

  /* mini chart bars */
  .chart-bars { display:flex; align-items:flex-end; gap:6px; height:56px; }
  .bar {
    flex:1; border-radius:4px 4px 0 0;
    background: linear-gradient(180deg, var(--green-lt), var(--green));
    transform-origin: bottom;
    transform: scaleY(0);
    animation: growBar .8s cubic-bezier(.34,1.56,.64,1) forwards;
  }
  .bar:nth-child(1){animation-delay:.6s;} .bar:nth-child(2){animation-delay:.7s;}
  .bar:nth-child(3){animation-delay:.8s;} .bar:nth-child(4){animation-delay:.9s;}
  .bar:nth-child(5){animation-delay:1.0s;} .bar:nth-child(6){animation-delay:1.1s;}
  .bar:nth-child(7){animation-delay:1.2s; background:linear-gradient(180deg,var(--gold-lt),var(--gold));}
  @keyframes growBar { to { transform: scaleY(1); } }

  /* stat row */
  .stat-row { display:flex; gap:12px; }
  .stat {
    flex:1; text-align:center; padding:12px 8px;
    background: rgba(255,255,255,.03);
    border-radius:10px; border:1px solid rgba(255,255,255,.06);
  }
  .stat-num {
    font-family:'Bebas Neue',sans-serif;
    font-size:28px; line-height:1;
    background: linear-gradient(135deg, var(--green-lt), var(--gold-lt));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
  }
  .stat-lbl { font-size:9px; color:rgba(244,249,246,.4); margin-top:3px; letter-spacing:.08em; text-transform:uppercase; }

  /* module list */
  .module-list { display:flex; flex-direction:column; gap:8px; }
  .module-item {
    display:flex; align-items:center; gap:10px;
    padding:9px 12px;
    border-radius:8px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.05);
    font-size:12px; color:rgba(244,249,246,.75);
    font-weight:600; transition:all .25s;
  }
  .module-item:hover {
    background:rgba(33,163,102,.1);
    border-color:rgba(33,163,102,.25);
    color:var(--white);
    transform:translateX(4px);
  }
  .module-dot {
    width:6px;height:6px;border-radius:50%;
    background:var(--green-lt);
    box-shadow:0 0 6px var(--green-lt);
    flex-shrink:0;
  }
  .module-item:nth-child(2) .module-dot { background:var(--gold-lt); box-shadow:0 0 6px var(--gold-lt); }
  .module-item:nth-child(3) .module-dot { background:#64b5f6; box-shadow:0 0 6px #64b5f6; }
  .module-item:nth-child(4) .module-dot { background:var(--green-lt); box-shadow:0 0 6px var(--green-lt); }
  .module-item:nth-child(5) .module-dot { background:var(--gold-lt); box-shadow:0 0 6px var(--gold-lt); }

  /* seat counter */
  .seat-box {
    display:flex;align-items:center;gap:14px;
    padding:14px 18px;
    background:rgba(255,80,80,.06);
    border:1px solid rgba(255,80,80,.2);
    border-radius:12px;
  }
  .seat-icon {font-size:22px;}
  .seat-text {}
  .seat-text strong { color:#ff8080; font-size:14px; display:block; }
  .seat-text span { color:rgba(244,249,246,.5); font-size:11px; }
  .seat-bar-wrap { flex:1; height:6px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; }
  .seat-bar { height:100%; border-radius:3px; background:linear-gradient(90deg,#ff6b6b,#ff8080); width:0; animation:fillBar 1.2s ease 1.5s forwards; }
  @keyframes fillBar { to { width:78%; } }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
  }
  @keyframes fadeRight {
    from { opacity:0; transform:translateX(30px); }
    to   { opacity:1; transform:translateX(0); }
  }

  /* ── CORNER BADGE ── */
  .corner-badge {
    position:absolute; top:24px; left:60px; z-index:20;
    display:flex;align-items:center;gap:8px;
    opacity:0;animation:fadeUp .5s ease forwards .05s;
  }
  .logo-mark {
    width:38px;height:38px;border-radius:10px;
    background:linear-gradient(135deg,var(--green),var(--blue));
    display:flex;align-items:center;justify-content:center;
    font-family:'Bebas Neue',sans-serif;font-size:20px;color:#fff;
    box-shadow:0 4px 16px rgba(33,163,102,.3);
  }
  .brand-txt { font-size:13px;font-weight:800;color:rgba(244,249,246,.9); letter-spacing:.05em; }
  .brand-sub { font-size:9px;color:rgba(244,249,246,.4);letter-spacing:.12em;text-transform:uppercase; }

  /* ── RESPONSIVE ── */
  @media(max-width:900px){
    .content{ grid-template-columns:1fr; }
    .right { padding:0 32px 48px; flex-direction:row; flex-wrap:wrap; }
    .dash-card { flex:1 1 200px; }
    .left { padding:100px 32px 32px; }
    .cell-float { display:none; }
  }
  @media(max-width:560px){
    .left { padding:90px 24px 28px; }
    .right { padding:0 24px 40px; flex-direction:column; }
    .stat-row { flex-direction:column; }
    .corner-badge { left:24px; }
    .cta-group { flex-direction:column;align-items:flex-start; }
    .btn-cta { width:100%;justify-content:center; }
  }